import React from 'react';
import Title from './title';
import intl from '../../../../locale';

export default function Integration() {
  return (
    <>
      <Title
        title={intl.get({
          id: 'code-assets.initHelp.openApi.integration.IntegrationMethod',
          defaultMessage: '集成方式',
        })}
      />
      <div className="sub-title">
        {intl.get({
          id: 'code-assets.initHelp.openApi.integration.CodeupProvidesAWideRange',
          defaultMessage: 'Codeup 提供了丰富的开放能力，为系统集成和多端扩展提供了支持。',
        })}
        <a
          href="https://help.aliyun.com/document_detail/206885.html"
          target="_blank"
          rel="noopener noreferrer"
        >
          {intl.get({
            id: 'code-assets.initHelp.openApi.integration.LearnMore',
            defaultMessage: '了解更多',
          })}
        </a>
      </div>
      {/* <div className="integration">
        <span style={{ top: 55, left: 250 }}>Open API</span>
        <span style={{ top: 99, left: 250 }}>Webhook</span>
        <span style={{ top: 143, left: 250 }}>
          {intl.get({
            id: 'code-assets.initHelp.openApi.integration.PlugIn',
            defaultMessage: '插件',
          })}
        </span>

        <span style={{ top: 56, left: 413 }}>
          {intl.get({
            id: 'code-assets.initHelp.openApi.integration.Dingtalk',
            defaultMessage: '钉钉',
          })}
        </span>
        <span style={{ top: 56, left: 498 }}>ACK</span>
        <span style={{ top: 56, left: 582 }}>ACR</span>

        <span style={{ top: 99, left: 413 }}>Flow</span>
        <span style={{ top: 99, left: 498 }}>ECS</span>
        <span style={{ top: 99, left: 586 }}>
          {intl.get({
            id: 'code-assets.initHelp.openApi.integration.More',
            defaultMessage: '更多',
          })}
        </span>

        <span style={{ top: 141, left: 413 }}>Jenkins</span>
        <span style={{ top: 141, left: 517 }}>
          {intl.get({
            id: 'code-assets.initHelp.openApi.integration.FunctionComputeFc',
            defaultMessage: '函数计算 （FC）',
          })}
        </span>
      </div> */}
      <div className="integration">
        <img src="https://img.alicdn.com/imgextra/i3/O1CN0164j1gh1MCmqlnuB5y_!!6000000001399-0-tps-1408-438.jpg" />
      </div>
      <Title title="OPEN API" />
      <div className="sub-title">
        {intl.get({
          id: 'code-assets.initHelp.openApi.integration.WeRecommendThatYouCall',
          defaultMessage:
            '欢迎选择云效代码管理 Codeup，如果你熟悉网络服务协议和一种以上编程语言，推荐调用 API 管理你的云上资源和开发应用程序。',
        })}
      </div>
      <div style={{ height: '38px' }} />
      <Title
        title={intl.get({
          id: 'code-assets.initHelp.openApi.integration.Instructions',
          defaultMessage: '使用说明',
        })}
      />
      <div className="sub-title">
        {intl.get({
          id: 'code-assets.initHelp.openApi.integration.SupportsHttpOrHttpsRequests',
          defaultMessage:
            '支持 HTTP 或者 HTTPS 网络请求协议，允许 GET、POST、PUT、DELETE 方法，调用示例请参见',
        })}
        <a
          href="https://help.aliyun.com/document_detail/206852.html"
          target="_blank"
          rel="noopener noreferrer"
        >
          {intl.get({
            id: 'code-assets.initHelp.openApi.integration.QuickStart',
            defaultMessage: '快速入门',
          })}
        </a>
        。
        <div>
          <ul className="ul-disc">
            <li>
              {intl.get({
                id: 'code-assets.initHelp.openApi.integration.CloudEffectCodeManagement',
                defaultMessage: '云效代码管理',
              })}
              <a
                href="https://help.aliyun.com/document_detail/206883.html"
                target="_blank"
                rel="noopener noreferrer"
              >
                &nbsp;Codeup SDK
              </a>
            </li>
            <li>
              {intl.get({
                id: 'code-assets.initHelp.openApi.integration.AlibabaCloud',
                defaultMessage: '阿里云',
              })}
              <a
                href="https://api.aliyun.com/#/?product=codeup"
                target="_blank"
                rel="noopener noreferrer"
              >
                &nbsp;API Explorer
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div style={{ height: '58px' }} />
    </>
  );
}
